<template>
    <div id="app">
        <!-- 黑色导航 -->
        <!-- <BackNav></BackNav>  -->
        <!-- 白色导航 -->
        <!-- <Nav class="nav" :MainList="MainList"></Nav> -->
        <!-- 轮播图 -->
        <Swiper :swiperList='swiperList' class="Swiper"></Swiper>
        <Classification :categoryList='categoryList'></Classification>
        <!-- <h1>category</h1> -->
    </div>
</template>

<script>
    // import BackNav from '@/pages/index/backNav.vue'
    // import Nav from '@/pages/index/nav.vue'
    import Swiper from '@/pages/index/swiper/swiper.vue'
    import Classification from '@/pages/communal/classification.vue'
export default {
    name: 'VueProject01Category',
    components:{
        // BackNav,
        // Nav,
        Swiper,
        Classification
    },
    data() {
        return {
            // MainList:[],//导航
            swiperList:[],//轮播图
            categoryList:[]
        };
    },

    mounted() {
        // this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then((res)=>{
        //     if(res.data){
        //         this.MainList=res.data.result
        //     }
        // })
        this.categoryData()
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/banner').then((res)=>{
            if(res.data){
                this.swiperList=res.data.result
            }
        })
    },

    methods: {
        categoryData(){
            this.axios.get(`https://apipc-xiaotuxian-front.itheima.net/category?id=${this.$route.query.id}`).then(res=>{
                if(res.data){
                    this.categoryList=res.data.result
                }
            })
        }
    },
    watch:{
        '$route':'categoryData'
    }
};
</script>

<style scoped lang='scss'>
    #app{
        width: 100%;
        height: auto;
    }
    .nav{
        z-index: 10000;
    }
</style>